<template>
  <wxc-tab-bar :tab-titles="tabTitles"
               :tab-styles="tabStyles"
               ref="wxc-tab-bar"
               title-type="icon"
               @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
    <!-- 第一个页面内容-->
    <div class="item-container" :style="contentStyle">
      <Article></Article>
    </div>
    <div class="item-container" :style="contentStyle">
      <Games></Games>
    </div>
    <div class="item-container" :style="contentStyle">
      <Recommend></Recommend>
    </div>
  </wxc-tab-bar>
</template>
<script>
import Article from './components/Article.vue'
import ArtCon from './components/ArtCon.vue'
import Games from './components/Games.vue'
import Recommend from './components/Recommend.vue'
import { WxcTabBar, Utils } from 'weex-ui';
import Config from './config'
let stream = weex.requireModule('stream');
const storage = weex.requireModule('storage')

export default {
  components: {WxcTabBar, Article, Games, Recommend},
  data: () => ({
    tabTitles: Config.tabTitles,
    tabStyles: Config.tabStyles
  }),
  beforeCreate() {
    storage.getItem('pcid', function (res) {
    if (res.data && res.data !== 'undefined') {
      return
    } else {
      storage.setItem('pcid', Math.random().toString(36).substr(2))
    }
    })
  },
  created () {
    const tabPageHeight = Utils.env.getPageHeight();
    // 如果页面没有导航栏，可以用下面这个计算高度的方法
    // const tabPageHeight = env.deviceHeight / env.deviceWidth * 750;
    const { tabStyles } = this;
    this.contentStyle = { height: (tabPageHeight - tabStyles.height) + 110 + 'px' };
  },
  mounted() {
    let status = storage.getItem('status', (res) => {
      // console.log('status', res)
      switch(res.data) { 
        case 'a':
          this.$refs['wxc-tab-bar'].setPage(0, null, false)
          break;
        case 'b':
          this.$refs['wxc-tab-bar'].setPage(1, null, false)
          break;
        case 'c':
          this.$refs['wxc-tab-bar'].setPage(2, null, false)
          break;
      }
    })

    // setTimeout(() => {
    // }, 2000)
  },
  methods: {
    wxcTabBarCurrentTabSelected (e) {
      console.log('e', e)
      // const index = e.page;
      // this.$router.push('/')
    }
  }
}
</script>
<style scoped>
  .page-a {
    background-color: #1b1a20;
  }
  .item-container {
    width: 750px;
    background-color: #f2f3f4;
    align-items: center;
    justify-content: center;
  }
</style>